<template>
    <div class="cart-container">

        <!-- cart-bar -->
        <div class="cart-bar">
            <div class="cart-left" @click="showCart">
                <img v-if="isEmpty" src="@/assets/images/cart-icon-normal.png" alt="">
                <img v-else src="@/assets/images/cart-icon.png" alt="">
                <span v-if="!isEmpty" class="tag-num">{{ cartLength }}</span>
            </div>
            <div class="cart-mid" @click="showCart">
                <span v-if="isEmpty">配送费2元</span>
                <p v-else>
                    <span class="total-price">共￥{{ totalPrice }}元</span>
                    <span class="delivery-fee">配送费2元</span>
                </p>
            </div>
            <div class="cart-right" @click="toOrderDetail">
                <span v-if="isEmpty"> 12元起送 </span>
                <span v-else class="settlement">结算</span>
            </div>
        </div>

        <!-- 背景遮罩 -->
        <transition name="fade">
            <div class='cart-mask' v-show="isShow" @click="isShow = false"></div>
        </transition>

        <!-- 购物车弹框 -->
        <transition name="slide">
            <div class="cart-list" v-show="isShow">

                <h3>
                    <span> 已选商品</span>

                    <span class="clear-cart" @click="clearCart">清空购物车</span>
                </h3>

                <div class="cart-scroll">
                    <div>
                        <food-item v-for="f in cartData" :data="f" :key="f.id"></food-item>
                    </div>
                </div>
            </div>
        </transition>


    </div>
</template>

<script>
import FoodItem from '@/components/FoodItem.vue';
export default {
    name: '',
    data() {
        return {
            isShow: false,
        }
    },
    components: { FoodItem },
    computed: {

        cartData() {
            return this.$store.getters.cartData
        },

        // 购物车是否为空
        isEmpty() {
            return this.cartData.length <= 0
        },
        // 计算总价
        totalPrice() {
            let count = 0;
            this.cartData.forEach(food => {
                count += food.price * food.num
            })
            return count;
        },
        cartLength() {
            return this.cartData.length;
        }
    },
    watch: {
        data(val) {
            if (val.length <= 0) {
                this.isShow = false;
            }
        }
    },
    methods: {
        showCart() {
            if (this.isEmpty) {
                this.isShow = false
            } else {
                this.isShow = !this.isShow;
            }
        },
        // 清空购物车
        clearCart() {
            this.cartData.forEach(food => {
                food.num = 0;
            })

            this.isShow = false;
        },
        toOrderDetail() {
            if (this.isEmpty) {
                return;
            }
            // 跳转到订单详情页。
            this.$router.push('/order-detail')
        },
    }
}
</script>
<style scoped lang='scss'>
// 遮罩动画
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: all .5s ease-in-out;
    /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
}


// slide 
.slide-enter-to,
.slide-leave-to {
    transform: translateY(0);
}

// slide 
.slide-enter,
.slide-leave-to {
    transform: translateY(600px);
}

.slide-enter-active,
.slide-leave-active {
    transition: all .5s ease;
    /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
}

.cart-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;

    .cart-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .5);
        backdrop-filter: blur(10px);
    }

    .cart-list {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100vw;
        // height: 500px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        z-index: 1;
        box-sizing: border-box;
        padding: 12px;

        .cart-scroll {
            height: 500px;
            overflow-y: scroll;
        }

        h3 {
            font-weight: 200;

            .clear-cart {
                float: right;
                margin-right: 16px;
            }
        }
    }
}


.cart-bar {
    position: fixed;
    left: 18.67px;
    bottom: 37px;
    width: 338.84px;
    height: 49.41px;
    opacity: 1;
    border-radius: 25px;
    background: rgba(58, 54, 53, 1);

    display: flex;
    color: #fff;
    line-height: 49.41px;
    z-index: 10;

    .cart-left {
        width: 45px;
        position: relative;

        img {
            width: 100%;
            margin-top: -9px;
        }

        .tag-num {
            width: 16px;
            height: 16px;
            background: rgba(37, 136, 255, 1);
            border: solid 1px #fff;
            color: #fff;
            position: absolute;
            right: -8px;
            top: 0;
            border-radius: 50%;
            line-height: 16px;
            text-align: center;
            font-size: 12px;
        }
    }

    .cart-right {
        width: 96px;
    }

    .cart-mid {
        flex: 1;
        padding-left: 26px;

        p {
            height: 100%;
            display: flex;
            flex-direction: column;

            span {
                flex: 1;
            }

            .total-price {
                font-size: 15px;
                line-height: 30px;
            }

            .delivery-fee {
                font-size: 12px;
                line-height: 12px;
                color: rgba(153, 153, 153, 1);
            }
        }

    }

    .settlement {
        display: inline-block;
        width: 96px;
        height: 50px;
        background: rgba(37, 136, 255, 1);
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        text-align: center;

    }
}
</style>
